IllustratorやFigmaでたこ焼きを描いて、After EffectsとLottieを利用して動かしてみる

今回たこ焼きを動かしたくなったので、IllustratorやFigmaにてイラストや画面を作り、After Effectsでアニメーションを付けてLottieにエクスポートした一連の流れをまとめました。（After Effectsの細かい解説はありません）

#デザイン

#Adobe After Effects

Isoda

2023.06.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Lottieとは

Lottieとは民泊などでお馴染みのAirbnbが開発したアニメーションライブラリです。
Lottieを利用すればjpgやgifといった画像を使わないJSONベースの軽量なアニメーションを作ることが可能です。さらにLottieへアップロードしたアニメーションはFigmaに貼り付けられます。
ただLottieでは複雑な動きを作ることはできないため、After Effecsで動きを編集します。

After Effectsについて

After EffectsはAdobeが販売している映像のデジタル合成やモーショングラフィックス、タイトル制作などを目的としたソフトウェアです。AEと略されることも多いため、「○○な動き AE」と検索すればAfter Effectsでの動きの付け方の記事や動画が出てきます。今回はAfter Effectsで実現する動きの付け方は割愛しますが、After Effectsで作成可能でもLottieへエクスポートできない機能や表現が色々あるため制作前に確認が必要です。

IllustratorからAfter Effectsへエクスポート

イラストを動かしたい場合はIllustratorファイルをAfter Effectsにエクスポートします。 Illustratorファイルのレイヤーで一つのベクトルレイヤーになってしまうので、動かしたいパーツごとにレイヤー分けをしましょう。今回準備したイラストはたこ焼きと千枚通しに別々の動きをつけたいためレイヤー分けしました。
Illustratorファイルを保存する際はオプションの「PDF互換ファイルを作成」にチェックを入れてください。また、Illustratorで作成したグラデーションは無効になってしまうので気をつけてください。

illustrator_laugh

After Effectsの画面上で新規コンポジションを作成しましょう。コンポジションは、Flash ProfessionalのムービークリップまたはPremiere Pro のシーケンスに似ています。（と公式サイトに記載されています）
作成したIllustratorはAfter Effectsへドラッグ&ドロップしましょう。読み込みの種類はコンポジションです。
エクスポートしたIllustrator ファイルは、After Effects上でベクトルレイヤーからシェイプレイヤーに変換する必要があります。
レイヤー→作成→ベクトルレイヤーからシェイプを作成（もしくは対象レイヤー右クリックから作成へ）

ai_ae

Lottie用に書き出す際、この操作を忘れるとイラストが表示されなくなるので気をつけましょう。

FigmaからAfter Effectsへエクスポート

UI画面を作成してリッチな動きをつけたい場合はAfter Effectsへエクスポートして動きをつけます。
Figma上でAEUXというプラグインを利用するとFigmaで作成したデータをAfterEffectsに書き出してくれます。
AEUXはAfterEffectsを起動している状態でないと動作しないのでご注意ください。私はIllustratorで描いたイラストを利用して簡単なアニメーションラフを作りました。
figma_laugh

Figmaでのデータがどうエクスポートされるか

Figmaで作ったデータがどのようにエクスポートされるか、気になっていたのでやってみました。
下写真はFigmaの画面です。左のレイヤーサイドメニューで、各要素がどのような状態かを示しています。Component、Group、Frame、テキスト状態を作りました。（くいだおれ太郎が食い倒れ太郎表記になっている点は目をつぶってください）

Figma_screen

After Effectsの画面です。Figma上でComponentもしくはFrameにしたものはコンポジションに、Group化したものは単独のレイヤーが作成されてグループ化していた要素と親子関係になるようです。
ae_screen2

After EffectsからLottieへエクスポート

After Effectsで作成した動画をJSON形式で書き出すためにはBodymovinというプラグインを入れる必要があります。
ウィンドウ→エクステンションで開き、保存先を選んだ上で書き出ししましょう。
書き出した後のJSONファイルはLottieのWeb上のフォルダもしくはFigma上のLottieプラグイン（後述）へエクスポートすればアニメーションの確認が可能です。Lottieを経由することで、Figmaのプロトタイプで確認可能な動画を配置することができます。

完成したアニメーション

FigmaのLottieプラグインから貼り付けたアニメーションです。Figmaだと横幅500pxのgifをFigma上に貼り付けることができます。（1枚目がIllustrator経由で作成したアニメーション、2枚目がFigma経由で作成したアニメーションです）

Lottieからgifファイルに書き出す場合、無料版は150x150pxのみ書き出し可能です。
Illustrator経由で作成したアニメーション
takoyaki1

Figmaを経由して作成したアニメーション
takoyaki

Illustrator、Figmaどちらを経由しても仕上がりに差はありません。
After Effectsエクスポート前の素材の準備方法やエクスポート後の工程が若干変わります。個人的な使い分けとしては、Illustratorは単体のモチーフにアニメーションをつけたい場合に利用し、FigmaはUIパーツにリッチな動きをつけたい場合（例えば数が増えたときのバッジ）や絵コンテを作った後アニメーションにしたい場合（例えばちょっと凝ったSplash）に利用していました。